<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
        <view v-else>
            <view class="order-header"></view>
            <view class="order-main">
                <view class="order-title">
                    <view class="order-t-l">
                        <text>{{ data.Type == 23 ? data.SortingStateName : data.StateName }}</text>
                        <view>{{ data.Sn }}</view>
                    </view>
                    <view class="order-header-button" @click="$refs.orderstepPop.open()">查看进度</view>
                </view>
                <view class="order-item-box">
                    <view class="order-user" v-if="data.Type != 23">
                        <view class="location" v-if="false">
                            <uni-icons type="location-filled" size="40" customIcons="icon-white"></uni-icons>
                        </view>
                        <view class="user-info">
                            <text class="user-info-name">{{ data.ContactName }} {{ data.ContactTel }}</text>
                            <text class="user-info-location">{{ data.Address }}</text>
                        </view>
                    </view>
                    <view v-else>
                        <view class="consignee">提货人：{{ data.OrderContactName }} {{ data.OrderContactTel }}</view>
                        <view class="consignee takeTheir">
                            <view>自提点：{{ data.TakeDeliveryName }}</view>
                            <text class="time">营业时间：08:00-20:00</text>
                            <view class="mapAddress">
                                <view>
                                    <view class="text-show-line-1 fs-24">{{ data.Address }}</view>
                                    <!-- <view class="fs-24">距您：744m</view> -->
                                </view>
                                <view class="navigation">
                                    <view @click="mapNav(data)">
                                        <iconsfont customIcons="icon-daohang1" color="#007aff" size="40"></iconsfont>
                                        <text>导航</text>
                                    </view>
                                    <view @click="call(data.ContactTel)">
                                        <iconsfont customIcons="icon-dianhua1" color="#007aff" size="40"></iconsfont>
                                        <text>电话</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="consignee takeTheir borderNone" v-if="data.AppointmentTime">
                            <view>预计可提货时间：{{ data.AppointmentTime }}</view>
                            <text class="tip">请按规定时间前往自提点取货，如有问题可联系团长为您解决</text>
                        </view>
                    </view>
                    <view class="logistics" v-if="data.Type != 23"
                        @click="goUrl('/pages_shop/packet/order/logisticsList?orderId=' + id + '&tabIndex=1')">
                        <view class="logistics-title">发货记录</view>
                        <view class="logistics-right">
                            <text class="logistics-desc">查看详情</text>
                            <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item">
                    <text class="title-text">订购商品</text>
                    <!-- <view class="order-item-main" @click="$refs.policyPop.open()"> -->
                    <view class="order-item-main"
                        @click="goUrl('/pages_shop/packet/order/logisticsList?orderId=' + id + '&tabIndex=0')">
                        <view class="order-item-imgs">
                            <view class="img-item" v-for="(item, index) in showImgs" :key="index">
                                <image mode="aspectFill" :src="easyGetImgUrl(item)" class="order-item-img"></image>
                                <view class="order-item-name" v-if="itemname">{{ itemname }}</view>
                            </view>
                            <uni-icons type="more" v-if="imgs.length > 3"></uni-icons>
                        </view>
                        <view class="right-box">
                            <view class="num-box">
                                <text class="order-desc">共{{ detailList.length }}种</text>
                                <text class="order-desc" v-show="false">数量{{ getTotalNum() }}</text>
                            </view>
                            <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item" v-if="data.Type != 23">
                    <view class="title-text title-text-flex" @click="
                        goUrl(
                            '/pages_shop/packet/order/paymentRecord?orderId=' +
                            id +
                            '&PriceSum=' +
                            data.PayMoney +
                            '&ArrearsPrice=' +
                            data.ArrearsPrice +
                            '&WaitCheckPrice=' +
                            data.WaitCheckPrice,
                        )
                        ">
                        <view>付款信息</view>
                        <view class="title-text-right">
                            <text class="title-text-desc">付款记录</text>
                            <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                        </view>
                    </view>
                    <view class="">
                        <order-price :data="data"></order-price>
                    </view>
                </view>
                <view class="order-item product-item product-item-line">
                    <view class="title-text title-text-flex"
                        :class="data.OrderRemarkList && data.OrderRemarkList.length > 0 ? '' : 'ptb0'">
                        <view>备注信息</view>
                        <view class="title-text-right" @click="$refs.popReturnTip.open()">
                            <text class="title-text-desc">添加备注</text>
                            <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                        </view>
                    </view>
                    <view class="remark" v-if="data.OrderRemarkList && data.OrderRemarkList.length > 0">
                        <view class="remark-main" v-for="(item, index) in data.OrderRemarkList" :key="index">
                            <view class="remark-time">
                                <view>{{ item.Tel }}</view>
                                <text>{{ item.AddTime }}</text>
                            </view>
                            <view class="remark-desc">{{ item.Content }}</view>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item product-item-line" v-if="data.MainOrderSn">
                    <view class="title-text title-text-flex" style="padding-bottom: 0">
                        <view>关联订单</view>
                        <view class="title-text-right">
                            <text class="title-text-desc" style="padding-right: 0">{{ data.MainOrderSn }}</text>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item product-item-line">
                    <view class="title-text title-text-flex" style="padding-bottom: 0">
                        <view>发票信息</view>
                        <view>
                            <view class="title-text-right" v-if="invoiceId != 0"
                                @click="goUrl(`/pages_me/packet/billing/billDetail?id=${invoiceId}`)">
                                <text class="title-text-desc">发票记录</text>
                                <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                            </view>
                            <view class="title-text-right" v-else>
                                <text class="title-text-desc" style="padding-right: 0">无</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item product-item-line" v-if="false">
                    <view class="title-text title-text-flex" style="padding-bottom: 0">
                        <view>合同信息</view>
                        <view class="title-text-right">
                            <text class="title-text-desc" style="padding-right: 0">无</text>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item" v-if="data.ProjectData && data.ProjectData.ProjectName">
                    <view class="title-text title-text-flex">
                        <view>项目信息</view>
                    </view>
                    <view class="order-info">
                        <view class="order-info-item">
                            <text class="label">项目名称：</text>
                            <text class="value">{{ data.ProjectData.ProjectName }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">联系人：</text>
                            <text class="value">{{ data.ProjectData.ContactName }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.ProjectData.GuideName">
                            <text class="label">导购员：</text>
                            <text class="value">{{ data.ProjectData.GuideName }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">联系电话：</text>
                            <text class="value">{{ data.ProjectData.ContactTel }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">联系地址：</text>
                            <text class="value">{{ data.ProjectData.ProvinceName }}{{ data.ProjectData.CityName
                            }}{{ data.ProjectData.RegionName
                                }}{{ data.ProjectData.StreetName ? data.ProjectData.StreetName : ""
                                }}{{ data.ProjectData.Address }}</text>
                        </view>
                        <!-- <view class="order-info-item">
							<text class="label">报备时间：</text>                                                    
							<text class="value">{{data.ProjectData.AddTime}}</text>
						</view> -->
                        <view class="order-info-item" v-if="data.ProjectData.Description">
                            <text class="label">项目信息：</text>
                            <text class="value">{{ data.ProjectData.Description }}</text>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>订单信息</view>
                    </view>
                    <view class="order-info">
                        <view class="order-info-item">
                            <text class="label">订单编号：</text>
                            <text class="value">{{ data.Sn }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">订单类型：</text>
                            <text class="value">实物订货</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">支付方式：</text>
                            <text class="value">{{ data.PayWayName }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.PostTypeName">
                            <text class="label">配送方式：</text>
                            <text class="value">{{ data.Type == 23 ? "提货点自提" : data.PostTypeName }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.WarehouseName">
                            <text class="label">发货仓库：</text>
                            <text class="value">{{ data.WarehouseName }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.CustomForm && JSON.parse(data.CustomForm)[0].value">
                            <text class="label">订单留言：</text>
                            <text class="value" style="flex: 1">{{ JSON.parse(data.CustomForm)[0].value }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.PayMentRemark">
                            <image class="order-info-image" src="/static/uni.png"></image>
                        </view>
                        <view class="order-info-item" v-if="data.DeliveryTime">
                            <text class="label">交货日期：</text>
                            <text class="value">{{ data.DeliveryTime.slice(0, data.DeliveryTime.length - 9) }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">下单时间：</text>
                            <text class="value">{{ data.AddTime }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.Remark">
                            <text class="label">订单备注：</text>
                            <text class="value">{{ data.Remark }}</text>
                        </view>
                        <view class="order-info-item" v-if="deliveryImgs.length > 0">
                            <text class="label">送达图片：</text>
                            <view class="value imglist">
                                <image v-for="item in deliveryImgs" :src="item" :data-src="item"
                                    @tap="previewImage(index)" mode="aspectFill"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-bar" v-if="!isLoading && isShowBottomBar">
            <order-state-menu :item="data" @showSnewm="showSnewm" :paySwitch='paySwitch'></order-state-menu>
        </view>
        <uni-popup ref="policyPop" type="right" class="popupright" :safe-area="false">
            <view class="pop-pro-list" :style="'height:' + systemInfo.windowHeight + 'px'">
                <header-bar :config="config1"></header-bar>
                <view class="pop-header">
                    <text class="text">商品清单</text>
                    <uni-icons class="icon-close" size="40" type="arrowleft" @click="$refs.policyPop.close()">
                    </uni-icons>
                </view>
                <scroll-view scroll-y class="scroll">
                    <view class="order-submit-list">
                        <view class="order-item">
                            <view class="order-submit-item" v-for="(item, index) in listData" :key="index" :item="item">
                                <view class="item-top">
                                    <image v-if="!getAppSet().isHideImg" class="product-img" :src="item.ProductImage
                                        ? easyGetImgUrl(item.ProductImage)
                                        : '/static/img/no-img.jpg'
                                        " mode="aspectFill"></image>
                                    <view class="product-info">
                                        <text class="product-name">{{ item.ProductName }}</text>
                                        <view class="no-worry-item" v-if="item.QAList && item.QAList.length > 0">
                                            <view class="no-worry-box">
                                                <text class="no-worry-text"
                                                    :class="{ 'last-no-worry-text': qaIndex == item.QAList.length - 1 }"
                                                    v-for="(qaItem, qaIndex) in item.QAList">{{ qaItem.Description
                                                    }}</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <block v-for="subitem in item.SubItems">
                                    <view class="item-center">
                                        <view class="pro-item">
                                            <view class="left">
                                                <text class="label" v-if="subitem.DisplayAttribute"><text
                                                        class="specification">{{
                                                            subitem.DisplayAttribute ? subitem.DisplayAttribute : "默认规格"
                                                        }}</text></text>
                                                <text class="label">
                                                    <text class="price-bold">￥{{
                                                        parseFloat(
                                                            Number(subitem.Price).toFixed(subitem.PriceDigits),
                                                        )
                                                    }}</text>
                                                    <text class="value product-num">x{{
                                                        parseFloat(
                                                            Number(subitem.Amount).toFixed(subitem.NumDigits),
                                                        )
                                                    }}{{
                                                            subitem.UnitName ? subitem.UnitName : subitem.DefaultUnit
                                                        }}</text>
                                                </text>
                                            </view>
                                            <view class="right">
                                                <text class="value price-text">小计：￥{{ (subitem.Amount *
                                                    subitem.Price).toFixed(2) }}</text>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="remarkmenu" v-if="subitem.Remark || subitem.CustomForm"
                                        @click="goUrlremark(subitem)">
                                        <view>备注/表单</view>
                                        <view>
                                            <text v-if="subitem.Remark || subitem.CustomForm">已填写</text>
                                            <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                                        </view>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
        <uni-popup ref="popReturnTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>添加备注</text>
                </view>
                <textarea v-model="remarkdesc" />
                <view class="pop-action">
                    <view @click="remarkClose">取消</view>
                    <view @click="remarkConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="orderstepPop" type="bottom" :safe-area="false">
            <view class="pop-pro-list step-pro-list">
                <view class="pop-header">
                    <text class="text">订单状态</text>
                    <uni-icons class="icon-close" size="40" type="close" @click="$refs.orderstepPop.close()">
                    </uni-icons>
                </view>
                <scroll-view scroll-y class="scroll scrollheight">
                    <view class="steplist">
                        <template v-for="(item, index) in statelist">
                            <view :class="index == stateCurrent ? 'current' : index > stateCurrent ? 'active' : ''">
                                <view class="leftstate">
                                    <image src="/static/img/gou.png"></image>
                                </view>
                                <view class="right_desc" v-if="index == statelist.length - 1">
                                    <view>{{ item.StateName }}</view>
                                    <text v-if="item.Time">{{ item.Time }}</text>
                                </view>
                                <view v-else class="right_desc">
                                    <view>{{ item.StateName }}</view>
                                    <text v-if="item.Time">{{ item.Time }}</text>
                                </view>
                            </view>
                        </template>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
        <uni-popup ref="deliveryCode" type="center" :safe-area="false" :maskClick="false">
            <view class="code-pop">
                <view class="code-top">
                    <view class="c-t-title">{{ data.TakeDeliveryName }}</view>
                    <view class="c-t-list">
                        <view>
                            <iconsfont customIcons="icon-yiwancheng" color="#fff" style="margin-right: 8rpx" size="24">
                            </iconsfont>货源直采
                        </view>
                        <view>
                            <iconsfont customIcons="icon-yiwancheng" color="#fff" style="margin-right: 8rpx" size="24">
                            </iconsfont>品质保障
                        </view>
                        <view>
                            <iconsfont customIcons="icon-yiwancheng" color="#fff" style="margin-right: 8rpx" size="24">
                            </iconsfont>便捷省心
                        </view>
                    </view>
                    <image src="/static/img/codebg.png"></image>
                </view>
                <view class="code-info">
                    <uqrcode ref="uqrcode" class="uqrcode" canvas-id="qrcode" :value="data.Sn" size="448"
                        sizeUnit="rpx">
                    </uqrcode>
                </view>
                <view class="desc">请凭二维码取货</view>
                <view class="desc1">订单编号：{{ data.Sn }}</view>
                <image src="/static/img/close_one.png" class="closeimg" @click="$refs.deliveryCode.close()"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import orderPrice from "@/pages_shop/components/order/order-price.vue"
import orderStateMenu from "@/components/order/order-state-menu.vue"
import itemTitleBorder from "@/pages_shop/components/common/item-title-border.vue"
import { getOrderDetail, AddOrEditOrderRemark, GetOrderInfoByNumber, GetIsValetOrderPay } from "@/service/api/order.js"
import { GetAppointmentHourNum } from "@/service/api/communtiyGroup.js"
export default {
    components: {
        itemTitleBorder,
        orderPrice,
        orderStateMenu,
    },
    data() {
        return {
            config: {
                title: "订单详情",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            config1: {
                title: "订单详情",
                back: false,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            itemname: "", //单个商品显示名称
            remarkdesc: "",
            isShowBottomBar: false,
            id: 0,
            allPayPic: 0,
            data: {},
            detailList: [],
            isLoading: false,
            imgs: [],
            showImgs: [],
            statelist: [],
            stateCurrent: 0,
            listData: {},
            systemInfo: {},
            ordertype: 23,
            HourNum: "",
            invoiceId: 0, // 发票id
            deliveryImgs: [],
            paySwitch: 1
        }
    },
    watch: {
        //监听更新
        getUpOrderView(e) {
            this.getDetail()
        },
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onReady() {
        // this.$refs.uqrcode.toTempFilePath({
        //   success: res => {
        //   }
        // });
    },
    onLoad(e) {
        this.id = e.id
        this.allPayPic = e.allPayPic
        console.log(e)
        if (e.open) {
            this.$nextTick((e) => {
                this.$refs.policyPop.open()
            })
        }
    },
    onUnload() {
        let param = {
            title: '订单详情',
            id: this.id,
        }
        this.tackVisit(param)
        this.initTack()
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
        this.config1.backgroundColor = [1, this.getThemeColor]
    },
    mounted() {
        this.getDetail()
        this.isShowBottomBar = true
        this.systemInfo = uni.getSystemInfoSync()
        this.GetAppointmentHourNum()
        this.GetIsValetOrderPay()//代客下单是否可支付
    },
    methods: {
        //获取详情
        getDetail() {
            let param = {
                orderId: this.id,
            }
            this.isLoading = true
            getOrderDetail(param).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data.OrderDetail
                    if (res.Data.OrderInvoice) {
                        this.invoiceId = res.Data.OrderInvoice.ID
                    }
                    this.detailList = this.data.DetailList
                    this._dataformat(this.detailList)
                    let statelist = this.data.StateProgressData
                    this.statelist = statelist.reverse()
                    this.statelist.forEach((e, index) => {
                        if (this.data.StateName == e.StateName) {
                            this.stateCurrent = index
                        }
                    })
                    this.getImageList(this.data.DetailList)
                    this.isLoading = false
                    if (this.data.State == 6 || this.data.State == 10) {
                        this.GetOrderImg()
                    }
                }
            })
        },
        GetIsValetOrderPay() {
            GetIsValetOrderPay().then((res) => {
                if (res.State == 1) {
                    this.paySwitch = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        GetOrderImg() {
            let path = "?number=" + this.data.Sn
            GetOrderInfoByNumber(path).then((res) => {
                if (res.State == 1) {
                    if (res.Data.completeUrl) this.deliveryImgs = res.Data.completeUrl.split(",")
                }
            })
        },
        GetAppointmentHourNum() {
            GetAppointmentHourNum().then((res) => {
                if (res.State == 1) {
                    this.HourNum = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        _dataformat(data) {
            let items = []
            data.forEach((e) => {
                let filterItem = items.filter((item) => {
                    return item.ProductId == e.ProductId
                })
                if (filterItem.length < 1) {
                    let SubItems = []
                    SubItems.push(e)
                    let obj = {
                        ProductId: e.ProductId,
                        ProductName: e.Name,
                        ProductImage: e.ProductImage,
                        Attribute: e.DisplayAttribute,
                        SubItems: SubItems,
                        QAList: e.QAList,
                    }
                    items.push(obj)
                } else {
                    filterItem[0].SubItems.push(e)
                }
            })
            this.listData = items
        },
        getTotalNum() {
            let num = 0
            let allClass = []
            this.detailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
        getImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    arr.push(e.ProductImage)
                })
            }
            if (list.length == 1) {
                this.itemname = list[0].Name
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 3)
        },
        pay() {
            uni.requestPayment({
                provider: "wxpay",
                timeStamp: String(Date.now()),
                nonceStr: "A1B2C3D4E5",
                appId: "wx5a51d968090b16b2",
                package: "prepay_id=" + "wx2021061314502291fcfe0db70013231072",
                signType: "MD5",
                paySign: "111111111",
                total_fee: 0.01,
                success: function (res) { },
                fail: function (err) {
                    console.log("fail:" + JSON.stringify(err))
                },
            })
        },
        remarkClose() {
            this.$refs.popReturnTip.close()
            this.remarkdesc = ""
        },
        remarkConfirm() {
            if (this.remarkdesc == "") {
                this.easyToast("请填写备注")
                return
            }
            let param = {
                orderId: this.id,
                content: this.remarkdesc,
            }
            AddOrEditOrderRemark(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("备注成功")
                    this.$refs.popReturnTip.close()
                    this.getDetail()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        showSnewm(item) {
            this.$refs.deliveryCode.open()
        },
        goUrlremark(item) {
            this.easyGoTo(
                "/pages_shop/packet/order/remark?productdata=" + encodeURIComponent(JSON.stringify(item)) + "&from=1",
            )
        },
        call(phone) {
            uni.makePhoneCall({
                phoneNumber: phone,
            })
        },
        mapNav(item) {
            // #ifdef APP-PLUS
            this.openMapRoute(+item.Latitude, +item.Longitude, item.Address)
            // #endif
            // #ifdef MP-WEIXIN
            this.openMapWX(+item.Latitude, +item.Longitude, item.Address)
            // #endif
        },
        openMapWX(lat, lon, cityName) {
            uni.openLocation({
                // 传入你要去的纬度
                latitude: lat,
                // 传入你要去的经度
                longitude: lon,
                // 传入你要去的地址信息 不填则为空
                address: cityName,
                // 缩放大小
                scale: 18,
                success: function () {
                    console.log("成功的回调success")
                },
            })
        },
        //预览图片
        previewImage(index) {
            var current = index
            uni.previewImage({
                current: current,
                urls: this.deliveryImgs,
            })
        },
        openMapRoute(lat, lon, cityName) {
            var url = ""
            if (plus.os.name == "Android") {
                var hasBaiduMap = plus.runtime.isApplicationExist({
                    pname: "com.baidu.BaiduMap",
                    action: "baidumap://",
                })
                var hasAmap = plus.runtime.isApplicationExist({
                    pname: "com.autonavi.minimap",
                    action: "androidamap://",
                })
                var urlBaiduMap =
                    "baidumap://map/marker?location=" + lat + "," + lon + "&title=" + cityName + "&src=婚梯"
                var urlAmap =
                    "androidamap://viewMap?sourceApplication=婚梯&poiname=" +
                    cityName +
                    "&lat=" +
                    lat +
                    "&lon=" +
                    lon +
                    "&dev=0"
                if (hasAmap && hasBaiduMap) {
                    plus.nativeUI.actionSheet(
                        {
                            title: "选择地图应用",
                            cancel: "取消",
                            buttons: [
                                {
                                    title: "百度地图",
                                },
                                {
                                    title: "高德地图",
                                },
                            ],
                        },
                        function (e) {
                            switch (e.index) {
                                case 1:
                                    plus.runtime.openURL(urlBaiduMap)
                                    break
                                case 2:
                                    plus.runtime.openURL(urlAmap)
                                    break
                            }
                        },
                    )
                } else if (hasAmap) {
                    plus.runtime.openURL(urlAmap)
                } else if (hasBaiduMap) {
                    plus.runtime.openURL(urlBaiduMap)
                } else {
                    url = "geo:" + lat + "," + lon + "?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82"
                    plus.runtime.openURL(url) //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差
                }
            } else {
                // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）
                plus.nativeUI.actionSheet(
                    {
                        title: "选择地图应用",
                        cancel: "取消",
                        buttons: [
                            {
                                title: "Apple地图",
                            },
                            {
                                title: "百度地图",
                            },
                            {
                                title: "高德地图",
                            },
                        ],
                    },
                    function (e) {
                        switch (e.index) {
                            case 1:
                                url =
                                    "http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=" +
                                    lat +
                                    "," +
                                    lon +
                                    "&spn=0.008766,0.019441"
                                break
                            case 2:
                                url =
                                    "baidumap://map/marker?location=" +
                                    lat +
                                    "," +
                                    lon +
                                    "&title=" +
                                    cityName +
                                    "&src=婚梯"
                                break
                            case 3:
                                url =
                                    "iosamap://viewMap?sourceApplication=婚梯&poiname=" +
                                    cityName +
                                    "&lat=" +
                                    lat +
                                    "&lon=" +
                                    lon +
                                    "&dev=0"
                                break
                            default:
                                break
                        }
                        if (url != "") {
                            plus.runtime.openURL(url, function (e) {
                                plus.nativeUI.alert("本机未安装指定的地图应用")
                            })
                        }
                    },
                )
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    background-color: $uni-bg-color-grey;
}

.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
    // background: red;
}

.product-item {
    padding: $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .title-text-desc {
        font-size: $font-size-24;
        color: $color-gray-2;
        padding-right: 12rpx;
        font-weight: normal;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.order-header {
    height: 190rpx;
    background: $app-color-main;
}

.order-main {
    margin-top: -190rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            width: 54rpx;
            height: 54rpx;
            border-radius: 27rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $app-color-main;
            margin-right: 20rpx;
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-text-mian;
            }

            .user-info-name {
                font-size: $font-size-30;
                font-weight: 700;
                margin-bottom: 12rpx;
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
                flex-shrink: 0;
                min-width: 120rpx;
                text-align: right;
            }

            .value {
                color: $app-color-text-mian;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}

.order-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;

    .btn {
        height: 64rpx;
        margin-left: 20rpx;
        padding: 0 40rpx;
    }
}

.logistics {
    height: 88rpx;
    border-top: 1rpx solid #ebebeb;
    display: flex;
    padding: 0 $app-item-padding;
    justify-content: space-between;
    align-items: center;

    .logistics-title {
        font-size: $font-size-28;
        font-weight: bold;
    }

    .logistics-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logistics-desc {
        padding-right: 12rpx;
    }
}

.remark {
    background: #f7f7f7;

    .remark-main {
        border-bottom: 1rpx solid #ebebeb;

        .remark-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: $color-gray-1;
            padding: 24rpx 24rpx 20rpx 24rpx;

            view {
                font-weight: bold;
                font-size: $font-size-28;
            }

            text {
                font-size: $font-size-24;
                color: $color-gray-3;
            }
        }

        .remark-desc {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding: 0rpx 24rpx 20rpx 24rpx;
            word-break: break-all;
        }
    }

    & .remark-main:last-child {
        border: none;
    }
}

.remarkmenu {
    display: flex;
    padding: 24rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    border: 1rpx solid #f7f7f7;
    border-top: none;

    text {
        color: $color-gray-3;
    }
}

.pop-return-box {
    background: $color-white;
    border-radius: $border-radius-10;
    padding: $app-page-padding;
    width: 600rpx;

    textarea {
        max-height: 350rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
        border: 1rpx solid #979797;
        padding: 10rpx 0;
        text-indent: 10rpx;
        margin: 24rpx 0;
        width: 598rpx;
    }

    .pop-return-title {
        display: flex;
        justify-content: center;

        text {
            font-weight: 700;
            font-size: 34rpx;
        }
    }

    .pop-action {
        border-top: 1rpx solid rgba(0, 0, 0, 0.1);
        margin: 0 -24rpx -24rpx -24rpx;
        height: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        view {
            width: 50%;
            text-align: center;
            height: 110rpx;
            line-height: 110rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: $app-color-main;
        }

        &>view:first-child {
            color: $color-gray-1;
            border-right: 1rpx solid rgba(0, 0, 0, 0.1);
        }
    }

    .return-msg {
        margin-bottom: 20rpx;

        .card-group-cell {
            margin-left: 0 !important;
        }
    }

    .img-title {
        display: flex;
        color: $app-color-text-tip;
        margin-bottom: 20rpx;
    }

    .action {
        display: flex;
        flex-direction: row;

        .btn {
            flex: 1;
            border-radius: $border-radius-10;
            height: 70rpx;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

.pop-pro-list {
    background: #f1f1f1;
    border-radius: 24rpx 24rpx 0 0;

    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        // border-radius: 24rpx 24rpx 0 0;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 220rpx);
    }

    .scrollheight {
        height: auto;
        background: #f6f6f6;
    }
}

.popupright {
    .icon-close {
        right: auto !important;
        left: 24rpx;
        color: $color-gray-3;
    }
}

.step-pro-list {
    // background: #000;
    background: #f6f6f6;
    border-radius: 24rpx 24rpx 0 0;
    height: auto;
    padding-bottom: 0;
    height: auto;

    .pop-header {
        border-bottom: none;
    }
}

.steplist {
    padding: 40rpx 26rpx 100rpx 34rpx;
    background: #f6f6f6;

    &>view {
        position: relative;
        display: flex;
        height: 104rpx;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 12rpx;

        .leftstate {
            width: 24rpx;
            height: 24rpx;
            background: #b1b1b1;
            border-radius: 50%;
            margin-right: 36rpx;
            position: relative;
            z-index: 10;

            image {
                width: 24rpx;
                height: 24rpx;
                display: block;
            }
        }

        .right_desc {
            flex: 1;
            background: #ffffff;
            border-radius: 8rpx;
            color: $color-gray-2;
            font-size: 28rpx;
            height: 104rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 24rpx;
        }
    }

    &>view:last-child:after {
        width: 0;
        height: 0;
    }

    &>view:after {
        content: "";
        width: 2rpx;
        height: 104rpx;
        // background: $app-color-main;
        background: url(/static/img/shuline.png) repeat-y;
        position: absolute;
        left: 11rpx;
        top: 50%;
        z-index: 1;
    }

    .current {
        .leftstate {
            background: $app-color-main;
            width: 32rpx;
            height: 32rpx;
            margin-left: -4rpx;

            image {
                width: 32rpx;
                height: 32rpx;
                display: block;
            }
        }

        .right_desc {
            font-weight: bold;
            font-size: 32rpx;
            color: $app-color-main;
        }
    }

    .active {
        .leftstate {
            background: $app-color-main;
        }

        .right_desc {
            view {
                font-size: 28rpx;
                color: $color-gray-1;
            }

            text {
                font-size: 24rpx;
                color: $color-gray-2;
            }
        }
    }

    &>.active:after,
    &>.current:after {
        content: "";
        width: 2rpx;
        height: 104rpx;
        background: $app-color-main;
        position: absolute;
        left: 11rpx;
        top: 50%;
        z-index: 1;
    }
}

.ptb0 {
    padding-bottom: 0 !important;
}

.order-submit-list {
    background-color: $color-white;
    border-radius: $border-radius-10;

    .policy-price-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;

        .label-text {
            flex: 1;
        }
    }

    .policy-after-price {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        justify-content: flex-end;
    }
}

.order-submit-item {
    display: flex;
    flex-direction: column;
    border-bottom: 12rpx solid #f1f1f1;
    padding-bottom: 14rpx;
    padding: 24rpx;

    .item-top {
        display: flex;
        flex-direction: row;

        .product-img {
            width: 136rpx;
            height: 136rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $app-color-text-mian;
                flex: 1;
                display: flex;
                align-items: center;
                margin-bottom: 14rpx;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }

            .no-worry-item {
                .no-worry-box {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    border-radius: 4rpx;
                    background: #fff8f8;
                    padding: 8rpx;

                    .no-worry-text {
                        position: relative;
                        margin-right: 20rpx;
                        padding-left: 10rpx;
                        margin-bottom: 4rpx;
                        font-size: $font-size-22;
                        color: #db0032;

                        &:after {
                            content: " ";
                            position: absolute;
                            right: -16rpx;
                            top: 14rpx;
                            width: 6rpx;
                            height: 6rpx;
                            border-radius: 20rpx;

                            background-color: #db0032;
                        }
                    }

                    .last-no-worry-text {
                        &:after {
                            background-color: $transparent;
                        }
                    }
                }
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;

        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
}

.policy-item {
    .policy-name {
        display: flex;
        flex: 1;
    }
}

.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;

        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;

            text {
                font-size: 26rpx;
            }

            .specification {
                font-size: 30rpx;
                color: $color-gray-1;
            }
        }

        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}

.consignee {
    padding: $app-page-padding;
    // padding-bottom: 26rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    border-bottom: 2rpx solid #ebebeb;
}

.takeTheir {
    padding-top: 20rpx;

    .time {
        display: block;
        font-size: 24rpx;
        color: #333333;
        padding: 10rpx 0;
        font-weight: normal;
    }

    .tip {
        height: 60rpx;
        background: #fcf7f7;
        border-radius: 0px 0px 16rpx 16rpx;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0;
        font-size: 24rpx;
        color: #e01212;
        font-weight: normal;
    }
}

.borderNone {
    border: none;
}

.mapAddress {
    flex: 1;
    display: flex;
    font-weight: normal;
    justify-content: space-between;

    .navigation {
        display: flex;

        view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 60rpx;
            margin-left: 20rpx;

            text {
                color: #999;
            }
        }
    }
}

.fs-24 {
    font-size: 24rpx;
    color: #666;
}

.code-pop {
    width: 640rpx;
    background: #ffffff;
    border-radius: 32rpx;
    position: relative;

    .closeimg {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        bottom: -96rpx;
        left: 50%;
        margin-left: -32rpx;
    }
}

.code-top {
    position: relative;
    height: 208rpx;
    background: $app-color-main;
    border-radius: 32rpx 32rpx 0 0;

    image {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 640rpx;
        height: 114rpx;
    }
}

.c-t-title {
    font-size: 42rpx;
    text-align: center;
    color: #fff;
    padding: 24rpx 0 12rpx 0;
}

.c-t-list {
    display: flex;
    justify-content: center;

    &>view {
        margin: 0 22rpx;
        color: #fff;
        font-size: 22rpx;
    }
}

.code-info {
    position: relative;
    width: 448rpx;
    height: 448rpx;
    background: #ffffff;
    box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.2);
    border-radius: 16rpx;
    margin: -48rpx auto 0 auto;
    padding: 64rpx;

    .uqrcode {
        width: 448rpx;
        height: 448rpx;
        display: block;
    }
}

.desc {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 24rpx 0 16rpx 0;
}

.desc1 {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 0rpx 0 40rpx 0;
}

.icon-gray-1 {
    margin-top: 8rpx;
}

.imglist {
    display: flex;
    flex-wrap: wrap;

    image {
        width: 140rpx;
        height: 140rpx;
        margin: 0rpx 10rpx 10rpx 0rpx;
    }
}
</style>
